import { useContext, useEffect, useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useMediaPredicate } from 'react-media-hook';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import { Ui } from 'src/constant/Env';
import { MediaQuery } from 'src/constant/Media';
import { Page } from 'src/constant/Page';
import { ThemeContext } from 'src/context/ThemeContext';
import { RootState } from 'src/redux/store';
import { openSnackbar } from 'src/redux/uiSlice';
// import { deleteBankAccount, getAccountInfo } from 'src/service/accountService';
import { getMyBank, delMyBank } from "src/service/userService"
import style from './Account.module.scss';
import AccountCard from './component/AccountCard';
import AccountTable from './component/AccountTable';
import DisableTfaModal from './component/DisableTfaModal';
import EditDisplayNameModal from './component/EditDisplayNameModal';
import InvitationModal from './component/InvitationModal';
import ResetPasswordModal from './component/ResetPasswordModal';

type BankAccount = {

}

const Account = () => {
    const dispatch = useDispatch();
    const navigate = useNavigate();
    const { IcEdit, IcCopy, IcQrcode } = useContext(ThemeContext).image;
    const [isEditDisplayNameModalOpen, setEditDisplayNameModalOpen] = useState<boolean>(false);
    const [isResetPasswordModalOpen, setResetPasswordModalOpen] = useState<boolean>(false);
    const [isDisableTfaModalOpen, setDisableTfaModalOpen] = useState<boolean>(false);
    const [isInivationModalOpen, setInivationModalOpen] = useState<boolean>(false);
    const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
    const [bankAccount, setBankAccount] = useState<BankAccount[]>([]);
    const [refresh, setRefresh] = useState<boolean>(false);
    const { accountInfo: info } = useSelector((rootState: RootState) => rootState.auth);
    const token = localStorage.getItem("token")
    useEffect(() => {
        if (!info?.FID) return
        getMyBank({
            FUserID: info?.FID,
            token: token,
        }).then(res => {
            if (res.message) {
                setBankAccount(res.list)
            } else {
                dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
            }
        }).catch(e => {
            dispatch(openSnackbar({ message: e, severity: 'alert' }))
        })
    }, [refresh, info]);


    const onCopy = () => {
        dispatch(openSnackbar({ message: "已复制" }));
    };

    const onClickPasswordEdit = () => {
        setResetPasswordModalOpen(true);
    };

    const onClickQrcode = () => {
        setInivationModalOpen(true);
    };

    const onClickSlugEdit = () => {
        setEditDisplayNameModalOpen(true);
    };

    const onClickAdd = () => {
        navigate(Page.CreateAccount);
    };

    const onClickTfaEnable = (type: 'disable' | 'enable') => () => {
        if (type === 'enable') navigate(Page.EnableTfa);
        else setDisableTfaModalOpen(true);
    };

    const onClickDelete = (id: string) => {
        delMyBank({
            FID: id,
            token: token
        }).then(() => setRefresh(!refresh))
            .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
        // deleteBankAccount(id)
        //     .then(() => setRefresh(!refresh))
        //     .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    return (
        <div>
            <BackButton />
            <div className={style.head}>帐号与安全</div>
            <div className={style.content}>
                <div className={style.item}>
                    <div className={style.title}>帐号 ID</div>
                    <div className={style.valueItem}>
                        <div>{info?.FID}</div>
                        <CopyToClipboard onCopy={onCopy} text={info?.FID ?? ''}>
                            <img src={IcCopy} className={style.copyIcon} />
                        </CopyToClipboard>
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.title}>显示名称</div>
                    <div className={style.valueItem}>
                        <div>{info?.FUserName}</div>
                        <img src={IcEdit} onClick={onClickSlugEdit} />
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.title}>Email 地址</div>
                    <div className={style.valueItem}>
                        <div>{info?.FMail}</div>
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.title}>登入密码</div>
                    <div className={style.valueItem}>
                        <div>{'********'}</div>
                        <img src={IcEdit} onClick={onClickPasswordEdit} />
                    </div>
                </div>
                <div className={style.item}>
                    <div className={style.title}>二步骤验证{info?.FGoogle}</div>
                    <div className={style.valueItem}>
                        <div>{info?.FGoogle == "启用" ? "已启用" : "未启用"}</div>
                        {info && (
                            <Button
                                appearance="text"
                                onClick={onClickTfaEnable(info.FGoogle == "启用" ? 'disable' : 'enable')}
                            >
                                {info.FGoogle == "启用" ? "停用" : "启用"}
                            </Button>
                        )}
                    </div>
                </div>
                {(
                    <div className={style.item}>
                        <div className={style.title}>邀请码</div>
                        <div className={style.valueItem}>
                            <div>{info?.FID}</div>
                            <img src={IcQrcode} onClick={onClickQrcode} />
                        </div>
                    </div>
                )}
            </div>
            <div className={style.divider} />
            {(
                <div>
                    <div className={style.add}>
                        <div>我的收款方式</div>
                        <Button size="small" onClick={() => onClickAdd()}>
                            新增
                        </Button>
                    </div>
                    <div className={style.bank}>
                        {isBiggerThanMd ? (
                            <AccountTable data={bankAccount} onClickDelete={onClickDelete} />
                        ) : (
                            <AccountCard data={bankAccount} onClickDelete={onClickDelete} />
                        )}
                    </div>
                </div>
            )}
            <EditDisplayNameModal
                open={isEditDisplayNameModalOpen}
                handleClose={() => setEditDisplayNameModalOpen(false)}
            />
            <ResetPasswordModal
                open={isResetPasswordModalOpen}
                handleClose={() => setResetPasswordModalOpen(false)}
            />
            <DisableTfaModal
                open={isDisableTfaModalOpen}
                handleClose={() => setDisableTfaModalOpen(false)}
            />
            <InvitationModal
                open={isInivationModalOpen}
                handleClose={() => setInivationModalOpen(false)}
                userId={info?.FID ?? 'xxx'}
            />
        </div>
    );
};

export default Account;
